import React from 'react';
import { connect } from 'react-redux';
import * as routeActions from 'react-router-redux';
import './index.scss';

const SideMenuKey = {
  HOME: 'home',
  DISPLAY: 'display',
  SERVER: 'server',
  INTERACTIVE: 'interactive'
};

class SideMenu extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      selectedKey: SideMenuKey.HOME,
    };

    this.clickHandle = ::this.clickHandle;
  }
  componentWillMount() {
    const { locationBeforeTransitions } = this.props;
    const navPath = locationBeforeTransitions.pathname.split('/');
    navPath.shift();
    this.setState({ selectedKey: navPath[0] });
  }
  clickHandle(key) {
    const { dispatch } = this.props;
    if (key !== this.state.selectedKey) {
      this.setState({ selectedKey: key }, () => {
        dispatch(routeActions.push(key));
      });
    }
  }
  render() {
    const { selectedKey } = this.state;
    return (
      <div className="side-menu-wrapper">
        <div
          className={`side-menu-item ${selectedKey === SideMenuKey.HOME ? 'selected-menu-item' : ''}`}
          onClick={this.clickHandle.bind(this, SideMenuKey.HOME)}
        >
          <a href="javascript:void(0)" className="item home-icon">
            {''}
          </a>
          <div className="label">首页</div>
        </div>
        <div
          className={`side-menu-item ${selectedKey === SideMenuKey.DISPLAY ? 'selected-menu-item' : ''}`}
          onClick={this.clickHandle.bind(this, SideMenuKey.DISPLAY)}
        >
          <a href="javascript:void(0)" className="item display-icon">
            {''}
          </a>
          <div className="label">食安科普</div>
        </div>
        <div
          className={`side-menu-item ${selectedKey === SideMenuKey.SERVER ? 'selected-menu-item' : ''}`}
          onClick={this.clickHandle.bind(this, SideMenuKey.SERVER)}
        >
          <a href="javascript:void(0)" className="item server-icon">
            {''}
          </a>
          <div className="label">便民服务</div>
        </div>
        <div
          className={`side-menu-item ${selectedKey === SideMenuKey.INTERACTIVE ? 'selected-menu-item' : ''}`}
          onClick={this.clickHandle.bind(this, SideMenuKey.INTERACTIVE)}
        >
          <a href="javascript:void(0)" className="item interactive-icon">
            {''}
          </a>
          <div className="label">互动平台</div>
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return { ...state.routing };
}

export default connect(mapStateToProps)(SideMenu);
